tr.log-error {
  background-color: #f9f2f4;
  color: #c7254e;
}

.gv-request-response-table {
  height: 270px;

  > div {
    height: 100%;

    md-table-container {
      height: 100%;
    }
  }
}

.log-table {
  table {
    margin-bottom: 0;
  }

  .vertical-text {
    //hack: on FF, width is calculated before transformation
    width: 19px;
    writing-mode: vertical-lr;
    text-orientation: sideways;
  }

  .log-header {
    font-weight: bold;
    font-size: 14px;
  }

  table.md-table td.md-cell {
    border: 0;
    font-size: 12px;
  }
}

.logs-filters-container {
  md-input-container.md-block {
    margin-top: 0px;
  }
}

@mixin logHeader($color) {
  border: 1px solid $color;
  border-radius: 5px;
}

@mixin logResponsePanel($lighterColor, $darkerColor) {
  background-color: $lighterColor;
  border: 1px solid $darkerColor;
  > div:first-child {
    background-color: $darkerColor;
  }
}

.gv-log-request-header {
  @include logHeader(#b3e5fc);
}

.gv-log-response-header-1 {
  @include logHeader(black);
}

.gv-log-response-header-2 {
  @include logHeader(green);
}

.gv-log-response-header-3 {
  @include logHeader(#dbdb0a);
}

.gv-log-response-header-4 {
  @include logHeader(orange);
}

.gv-log-response-header-5 {
  @include logHeader(red);
}

.gv-log-response-panel-1 {
  @include logResponsePanel(#dadada, #cccccc);
}

.gv-log-response-panel-2 {
  @include logResponsePanel(#f1f8e9, #dcedc8);
}

.gv-log-response-panel-3 {
  @include logResponsePanel(#ffffc9, #dbdb0a);
}

.gv-log-response-panel-4 {
  @include logResponsePanel(#faddad, #ffc15a);
}

.gv-log-response-panel-5 {
  @include logResponsePanel(#ff9e9e, #f55d5d);
}

.gv-log-filter-dates {
  border: 1px dashed silver;
  border-radius: 10px;
  padding: 10px;
}

.log-body {
  position: relative;

  .copy {
    z-index: 2;
    position: absolute;
    top: 0;
    right: 0;
    background-color: #eee;
    background-size: 15px;
    padding: 6px 12px;
    border: 1px solid #d5d5d5;
    border-top: 0;
    border-right: 0;
    width: 30px;
    height: 30px;
    vertical-align: middle;

    ng-md-icon {
      cursor: pointer;
      position: relative;
      top: -2px;
      right: 8px;
    }
  }
}
